<template>
	<view>
		<u-navbar :is-back="true" title="实名认证" :background="background" :border-bottom="false"></u-navbar>
		<u-row gutter="16" class="u-p-15 u-font-12" style="background-color: #00a8ff;color: #bcdeff;">
			<u-col span="4">
				<view class="demo-layout bg-purple" style="text-align: center;">
					<image style="width: 25rpx;height: 25rpx;" class="u-m-r-16"
						src="../../../static/index/zzrz/topw.png"></image>
					<span style="color: #bcdeff;">基础信息</span>
				</view>
			</u-col>
			<u-col span="4">
				<view class="demo-layout bg-purple" style="text-align: center;">
					<image style="width: 25rpx;height: 25rpx;" class="u-m-r-16"
						src="../../../static/index/zzrz/topd.png"></image>
					<span style="color: #bcdeff;">实名认证</span>
				</view>
			</u-col>
			<u-col span="4">
				<view class="demo-layout bg-purple" style="text-align: center;">
					<image style="width: 25rpx;height: 25rpx;" class="u-m-r-16"
						src="../../../static/index/zzrz/topd.png"></image>
					<span style="color: #bcdeff;">资质认证</span>
				</view>
			</u-col>
		</u-row>
		<view class="u-p-15 u-font-12" style="background-color: #f3f4f5;color: #b2b2b2;">
			以下信息为医生认证必填信息，请认真填写
		</view>
		<view class="u-m-b-26">
			<u-cell-item title="请拍摄并上传你的身份证照片" :arrow="false" :border="false" :border-bottom="false"></u-cell-item>
			<u-row gutter="16">
				<u-col span="6">
					<view class="demo-layout bg-purple">
						<image :src="src1" mode="" @click="choose()" style="width: 100%;height: 300rpx;">
						</image>
					</view>
				</u-col>
				<u-col span="6">
					<view class="demo-layout bg-purple-light">
						<u-image :src="src2" mode="" @click="chooseImage()" style="width: 100%;height: 300rpx;">
						</u-image>
					</view>
				</u-col>
			</u-row>
		</view>


		<view class="u-m-b-26">
			<u-cell-item title="拍摄身份证要求" :arrow="false" :border-bottom="false"></u-cell-item>
			<p style="color: #808081;line-height: 40rpx;" class="u-font-10 u-m-l-35">大陆公民持有的本人二代身份证；</p>
			<p style="color: #808081;line-height: 40rpx;" class="u-font-10 u-m-l-35">拍照时确保身份证<text
					class="warn">边框完整，字体清晰，亮度均匀;</text></p>
			<u-row gutter="16">
				<u-col span="3">
					<view class="demo-layout bg-purple">
						<image src="../../../static/index/zzrz/de.png" mode="" style="width: 100%;height: 150rpx;">
						</image>
						<p style="text-align: center;" class="u-font-10">标准</p>
					</view>
				</u-col>
				<u-col span="3">
					<view class="demo-layout bg-purple-light">
						<image src="../../../static/index/zzrz/bkqs.png" mode="" style="width: 100%;height: 150rpx;">
						</image>
						<p style="text-align: center;" class="u-font-10">边框缺失</p>
					</view>
				</u-col>
				<u-col span="3">
					<view class="demo-layout bg-purple">
						<image src="../../../static/index/zzrz/bkmh.png" mode="" style="width: 100%;height: 150rpx;">
						</image>
						<p style="text-align: center;" class="u-font-10">边框模糊</p>
					</view>
				</u-col>
				<u-col span="3">
					<view class="demo-layout bg-purple-light">
						<image src="../../../static/index/zzrz/sgql.png" mode="" style="width: 100%;height: 150rpx;">
						</image>
						<p style="text-align: center;" class="u-font-10">闪光强烈</p>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-button type="primary" style="width: 90%;margin: 26px auto;" @click="next()">下一步</u-button>
	</view>
</template>

<script>
	import {
		ossAccessid,
		ossHost,
		ossSignature,
		ossPolicyBase64
	} from "@/common/ossUploadfile.js"
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#00a8ff',

				},
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'orange',
				// 身份证正反面
				src1: '../../../static/index/zzrz/zm.png',
				src2: '../../../static/index/zzrz/fm.png',

				src1s: '',
				src2s: ''
			}
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			},
			openinfo(url) {
				uni.navigateTo({
					url: url,
				});
			},
			next() {

				console.log("下一步");

				uni.setStorageSync('zm', this.src1s);
				uni.setStorageSync('fm', this.src2s);

				this.openinfo('/pages/qualification/qualification3/qualification3');
			},
			choose() {
				uni.chooseImage({

					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(this.src1 + ".png")
						console.log(res.tempFilePaths);
						let timestamp = (new Date()).valueOf();
						console.log(timestamp);
						let nameStr = "test1/" + timestamp + "/" + nameStr + ".png";
						console.log("nameStr:" + nameStr);
						console.log("res:" + res);
						let titleImage = ossHost + nameStr;
						console.log(titleImage);
						setTimeout((res) => {
							this.src1 = titleImage;
							this.src1s = nameStr;
							console.log("6src1" + this.src1);
						}, 2000)

						// this.$forceUpdate();
						uni.uploadFile({
							url: ossHost,
							filePath: res.tempFilePaths[0],
							fileType: "image",
							name: 'file',
							formData: {
								"key": nameStr,
								'OSSAccessKeyId': ossAccessid,
								'policy': ossPolicyBase64,
								'signature': ossSignature,
								'success_action_status': 200
							},
							header: {},
							success: obsRes => {
								uni.hideLoading()
								console.log(obsRes)
								if (obsRes.statusCode == 200) {
									uni.showToast({
										title: "图片上传成功",
										duration: 800
									})
								} else {
									uni.showToast({
										title: "上传失败,请检查网络或服务器", // 
										icon: "none",
									})
								}
							},
							fail: err => {
								console.log("报错")
								uni.hideLoading()
								uni.showToast({
									title: "网络错误请检查," + JSON.stringify(err),
									icon: "none",
									duration: 4000
								})
							},
						});
					}
				});
			},
			chooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(res.tempFilePaths)
						let timestamp = (new Date()).valueOf();
						console.log(timestamp);
						let nameStr = "test1/" + timestamp + "/" + nameStr + "a.png";
						console.log("nameStr:" + nameStr);
						console.log("res:" + res);
						let titleImage = ossHost + "/" + nameStr;
						console.log(titleImage);


						setTimeout((res) => {
							this.src2 = titleImage;
							this.src2s = nameStr;
							console.log("6src1" + this.src1);
						}, 2000)

						uni.uploadFile({
							url: ossHost,
							filePath: res.tempFilePaths[0],
							fileType: "image",
							name: 'file',
							formData: {
								"key": nameStr,
								'OSSAccessKeyId': ossAccessid,
								'policy': ossPolicyBase64,
								'signature': ossSignature,
								'success_action_status': 200
							},
							header: {},
							success: obsRes => {
								uni.hideLoading();
								console.log(obsRes)
								if (obsRes.statusCode == 200) {
									uni.showToast({
										title: "图片上传成功",
										duration: 800
									})
								} else {
									uni.showToast({
										title: "上传失败,请检查网络或服务器", // 
										icon: "none",
									})
								}
							},
							fail: err => {
								console.log("报错")
								uni.hideLoading()
								uni.showToast({
									title: "网络错误请检查," + JSON.stringify(err),
									icon: "none",
									duration: 4000
								})
							},
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.warn {
		color: #e83a4d;
	}
</style>
